<template>
  <div class="app-container">
    <el-form :model="form_create" label-width="120px">
      <h4>备件信息</h4>
      <p class="jc_dialog_block">
        <el-form-item label="备件编号">
          <el-input placeholder="自动生成" disabled></el-input>
        </el-form-item>
        <el-form-item label="备件名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="备件类型">
          <el-select v-model="pl88">
            <el-option label="可用" value="enabled"></el-option>
            <el-option label="不可用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
      </p>
      <p class="jc_dialog_block">
        <el-form-item label="规格型号">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="生产厂商">
          <el-select v-model="pl88">
            <el-option label="可用" value="enabled"></el-option>
            <el-option label="不可用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="pl88">
            <el-option label="可用" value="enabled"></el-option>
            <el-option label="不可用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
      </p>
      <p class="jc_dialog_block">
        <el-form-item label="更换周期" class="jc_inputGroup">
          <el-input></el-input>
          <el-select v-model="pl88">
            <el-option label="天" value="enabled"></el-option>
            <el-option label="不可用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-select v-model="pl88">
            <el-option label="可用" value="enabled"></el-option>
            <el-option label="不可用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="换算单位">
          <el-select v-model="pl88">
            <el-option label="可用" value="enabled"></el-option>
            <el-option label="不可用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
      </p>
      <p class="jc_dialog_block">
        <el-form-item label="换算比例">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="库存下限">
          <el-select v-model="pl88">
            <el-option label="可用" value="enabled"></el-option>
            <el-option label="不可用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库存上限">
          <el-input></el-input>
        </el-form-item>
      </p>
      <h4>扩展字段</h4>
      <p class="jc_dialog_block">
        <el-form-item label="备注">
          <el-input type="textarea"></el-input>
        </el-form-item>
      </p>
      <h4>关联文档</h4>
      <el-form-item label="选择文件" class="jc_inputGroup">
        <el-input></el-input>
        <el-button>选择设备</el-button>
        <span>文件大小不可超过30M</span>
      </el-form-item>
      <el-form-item label="文档类型">
        <el-select v-model="pl88" placeholder="备件台账(树状结构)">
          <el-option label="可用" value="enabled"></el-option>
          <el-option label="不可用" value="disabled"></el-option>
        </el-select>
      </el-form-item>
      <h4>关联图片</h4>
      <el-form-item label="上传图片">
        <el-input type="file"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="display:block;text-align: center;margin-top: 10px;">
      <el-button type="primary" @click="submitCreateForm">确定</el-button>
      <el-button @click="goToBack">取消</el-button>
    </div>
  </div>
</template>

<script>

  import {getRoleList} from "../../api/system";

  export default {
    components: {

    },
    data() {
      return {
        searchList: {},
        create_visible:false,
        form_create: {},
        list: null,
        activeName: 'first',
        unit: 1,
        total:0,
        multipleSelection: [],
        pl88: '',
      }

    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        };
        return statusMap[status]
      }
    },
    created() {
      //this.fetchData()
    },
    methods: {
      /*fetchData(p=0) {
        this.listLoading = true;
        var params = this.searchList;
        params.page = p;
        getRoleList(params).then(data => {
          this.list = data.obj.rows
          this.total = parseInt(data.obj.total)
          this.listLoading = false
        })
      },*/
      goToBack() {
        this.$router.push({path:'/warehouse/ledger'});
      },
      submitCreateForm() {

      },
      deleteRow() {
        alert('用this.multipleSelection获得要删除的数据');
        console.log('this.multipleSelection',this.multipleSelection);
      },

      changePage(p) {
        //this.fetchData(p)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight;
      },
      tableHeight_top() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
      tableHeight_bottom() {
        const filterHeight = 100;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
    }
  }
</script>
